﻿@using WebMobie.Modules.Query
<section>
	<div class="right fl">
		<div>
			<div class="main_product">
				@if (ViewBag.isHome != null)
				{
					<div class="pp_line"  data-bind="foreach: products">
						<div class="pp fl" data-bind="click:$root.viewproduct">
							<div class="pp_pad">
								<img data-bind="visible: Arrive" class="pp_new" alt="Sản phẩm mới có hàng" src="../../Content/images/new.png" />
								<img  data-bind="visible: IsUsed" class="pp_secondhand_2" alt="Sản phẩm đã qua sử dụng" src="../../Content/images/secondhand.png">
								<img  data-bind="visible: CommingSoon" class="pp_comingSoon" alt="Sắp có hàng" src="../../Content/images/comingSoon.png">
								<div class="img">
									<a data-bind="attr: { title: Name }" href="#">
										<img data-bind="attr: { atl: Name, src: ImageNormal }" style="height: 110px;" />
									</a>
								</div>
								<div class="p_info">
									<h4 data-bind="attr: { title: Name }" href="#"><span data-bind="text: Name"></span></h4>
								</div>
								<div class="p_price"><span data-bind="text: ActualCostView"></span> VNĐ</div>
							</div>
						</div>
					</div>
				}
				else
				{
					<div class="g_row"  data-bind="foreach: products"  >
						<div class="g_p">
							<div class="pp_gird_img" data-bind="click:$root.viewproduct">
								<img data-bind="visible: Arrive" class="pp_new" alt="Sản phẩm mới có hàng" src="../../Content/images/new.png" />
								<img data-bind="visible: IsUsed" class="pp_secondhand_3" alt="Sản phẩm đã qua sử dụng" src="../../Content/images/secondhand.png">
								<img data-bind="visible: CommingSoon" class="pp_comingSoon" alt="Sắp có hàng" src="../../Content/images/comingSoon.png">
								<a  data-bind="attr: { title: Name }" href="#"><img style="height: 170px;" data-bind="attr: { atl: Name, src: ImageNormal }" /></a>						
							</div>
							<div data-bind="click:$root.viewproduct"><a  data-bind="attr: { title: Name }" href="#"><h4 data-bind="attr: { title: Name }" href="#"><span data-bind="text: Name"></span></h4></a></div>
							<div style="height: 42px">
								<div  data-bind="visible: Price() > ActualCost()"><span class="dark_blue">Giá cũ:</span>&nbsp;<span class="g_price_official  line_through"><span data-bind="text: PriceView"></span> VNĐ</span></div>
								<div data-bind="visible: Price() > ActualCost()"><span class="dark_blue">Giá Khuyến Mãi:</span>&nbsp;<span class="g_price_official "><span data-bind="text: ActualCostView"></span> VNĐ</span></div>
								<div data-bind="visible: Price() <= ActualCost()"><span class="dark_blue">Giá:</span>&nbsp;<span class="g_price_official "><span data-bind="text: ActualCostView"></span> VNĐ</span></div>
							</div>
							<div></div>
							<div data-bind="click:$root.buyProduct">
								<a title="Thêm vào giỏ hàng" href="#">
									<img alt="Thêm vào giỏ hàng" src="../../Content/images/list_buy.png" >
								</a>
							</div>

						</div>
					</div>
	
				}
				


			</div>
		</div>
	</div>
	<div class="clr"></div>
</section>

<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.fancybox.js" type="text/javascript"></script>
<script src="../../Scripts/message.js" type="text/javascript"></script>
<script src="../../Scripts/Models/Product.js" type="text/javascript"></script>
<link href="../../Content/themes/message_default.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/numeral.min.js" type="text/javascript"></script>
<script type="text/javascript">

	ko.extenders.numeric = function (target, precision) {
		//create a writeable computed observable to intercept writes to our observable
		var result = ko.computed({
			read: target,  //always return the original observables value
			write: function (newValue) {
				var current = target(),
					valueToWrite = numeral(current).format('0,0');

				//only write if it changed
				if (valueToWrite !== current) {
					target(valueToWrite);
				} else {
					//if the rounded value is the same, but a different value was written, force a notification for the current field
					if (newValue !== current) {
						target.notifySubscribers(valueToWrite);
					}
				}
			}
		}).extend({ notify: 'always' });

		//initialize with current value to make sure it is rounded appropriately
		result(target());

		//return the new computed observable
		return result;
	};

	function UserListViewModel() {
		// Data
		var self = this;
		self.products = ko.observableArray();

		self.getMobiles = function () {
			$.getJSON("/api/products/GetMobiles/", function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};

		self.getMobilesBrand = function (brand) {
			$.getJSON("/api/products/GetMobilesBrand/"+brand, function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};

		self.getPhuKiens = function () {
			$.getJSON("/api/products/GetPhuKiens/", function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};

		self.getPhuKiensBrand = function (brand) {
			$.getJSON("/api/products/GetPhuKiensBrand/"+brand, function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};

		self.getMobilesUsed = function () {
			$.getJSON("/api/products/GetMobileUsed/", function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};

		self.viewproduct = function (product) {
			//console.log(product.ProductId());
			window.location = "/home/viewproduct/" + product.ProductId();
		};
		
		self.getTablets = function () {
			$.getJSON("/api/products/GetTablets/", function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};
		
		self.getTabletsBrand = function (brand) {
			$.getJSON("/api/products/GetTabletsBrand/"+brand, function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};
		
		self.getSearch = function (brand) {
			$.getJSON("/api/products/GetSearch/"+brand, function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};
		
		self.getPromotion = function () {
			$.getJSON("/api/products/GetPromotion/", function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};
		
		self.getCommingSoon = function () {
			$.getJSON("/api/products/GetCommingSoon/", function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Product(item); });
				self.products(mappedUsers);
			});
		};
		
		self.buyProduct = function(product) {
			$.ajax({
				url: '/api/Products/PostShopping/' + product.ProductId(),
				type: 'POST',
				contentType: "application/json; charset=utf-8",
				context: { productname: product.Name() },
				success: function (results, status) {
					if (status == "success") {
//						dhtmlx.alert({
//							text: "Thêm " + this.productname + "\"vào giỏ hàng thành công!",
//							title: "Thành Công!",
//							ok: "OK"
//						});
						window.location = "/home/ViewCart";
					}
				},
				error: function (results, status) {
					dhtmlx.alert({
						type: "alert-error",
						text: "Thêm " + this.productname + "\"vào giỏ hàng thất bại!",
						title: "Thất Bại!",
						ok: "OK"
					});
				}
			});
		};
	}

	var viewModel = new UserListViewModel();
	ko.applyBindings(viewModel);
	var action = @ViewBag.action;
	var brand = '@ViewBag.brand';
	if (action == 1) {
		viewModel.getMobiles();
	} else if (action == 2) {
		viewModel.getMobilesBrand(brand);
	} else if (action == 3) {
		viewModel.getPhuKiens();
	} else if (action == 4) {
		viewModel.getPhuKiensBrand(brand);
	} else if (action == 5) {
		viewModel.getMobilesUsed();
	}else if (action == 6) {
		viewModel.getTablets();
	}else if (action == 7) {
		viewModel.getTabletsBrand(brand);
	}else if (action == 8) {
		viewModel.getPromotion();
	}else if (action == 9) {
		viewModel.getCommingSoon();
	}else if (action == 10) {
		viewModel.getSearch(brand);
	}
	
</script>



